<template>
<div>
    <el-table
        :data="dataList1"
        style="width: 100%">
        <el-table-column
        prop="userId"
        label="userId"
        width="180">
        </el-table-column>
        <el-table-column
        prop="userName"
        label="userName"
        width="180">
        </el-table-column>
        <el-table-column
        prop="nickName"
        label="nickName">
        </el-table-column>
    </el-table>
    <el-table
        :data="dataList2"
        style="width: 100%">
        <el-table-column
        prop="userId"
        label="userId"
        width="180">
        </el-table-column>
        <el-table-column
        prop="orderId"
        label="orderId"
        width="180">
        </el-table-column>
        <el-table-column
        prop="orderStatus"
        label="orderStatus">
        </el-table-column>
    </el-table>
    <el-form :inline="true" :model="formInline">
        <el-form-item label="用户编号">
            <el-input v-model="formInline.userId"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
            <el-input v-model="formInline.userName"></el-input>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
import axios from 'axios'

export default {
    middleware: 'test02',//中间件验证
    name: 'examplelist2',
    layout: 'layout2',//使用布局1
    async asyncData2 (params) {
        const { data: res } = await params.$axios.get('https://www.fastmock.site/mock/2689726b93437edee54ac2c3fa01a909/api/react-demo1-list');
        return {
            dataList: res.data,
        }
    },
    async asyncData (params) {
        const { data: res1 } = await params.$axios.get('/user/queryUserList.do');
        const { data: res2 } = await params.$axios.get('/order/queryOrderList.do');
        const { data: res3 } = await params.$axios.get('/user/getUserItemById.do?primaryId=101');
        
        return {
            dataList1: res1.content.dataList,
            dataList2: res2.content.dataList,
            formInline: res3.content.data,
        }
    },
    data () {
        return {
            dataList1: [],
            dataList2: [],
            formInline: {}
        }
    },
}
</script>

<style scoped>
</style>
